<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24"
			        style="text-align: right">
					<el-button type="primary"
				           size="small"
				           v-on:click='queryMsg'>查询</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click='msgAdd'>新增</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click='msgEdit'>编辑</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click='startMsg'>启用</el-button>
				<el-button type="primary"
				           size="small"
				           v-on:click='stopMsg'>停用</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList"
				          stripe
				          border
				          @selection-change="handleSelectionChange">
					<el-table-column type="selection"
					                 width="80"
					                 fixed>
					</el-table-column>

					<el-table-column prop="msgTypeCode"
					                 label="任务大类"
					                 width="120" :formatter="msgTypeCodeCov">
					</el-table-column>
					<el-table-column prop="msgTypeName"
					                 label="任务小类"
					                 width="120" :formatter="msgTypeNameCov">
					</el-table-column>
					<el-table-column prop="msgName"
					                 label="短信名称"
					                 width="140">
					</el-table-column>
					<el-table-column prop="msgCont"
					                 label="短信内容"
					                 width="400">
					</el-table-column>
					<el-table-column prop="companyId"
					                 label="使用单位"
					                 :formatter="deptCov"
					                 width="280">
					</el-table-column>
					<el-table-column prop="status"
					                 label="状态"
					                 :formatter="statusCov">
					</el-table-column>

				</el-table>
				<!--翻页查询-->
				<el-pagination small
				             
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>

		<el-dialog title="短信模板"
		           v-model="msgFormShow">
			<el-form :model="msgFormData"
			         ref="msgForm"
			         :rules="msgRule"
			         label-width="100px">

				<el-col :span="24">
									<el-form-item label="维系大类" prop="msgTypeCode" required>
                    <tagCom :data="wxPType" :value="wxPCode" v-model="msgFormData.msgTypeCode" @select="changeWxPType"></tagCom>
									</el-form-item>
								</el-col>
		            <el-col :span="24" >
									<el-form-item label="维系小类" prop="msgTypeName" required>
                    <tagCom :data="wxCType" :value="wxCCode" v-model="msgFormData.msgTypeName" @select="changeWxCType" ></tagCom>
									</el-form-item>
								</el-col>
				<el-col :span="24">
					<el-form-item label="短信名称:"
					              prop="msgName">
						<el-input size="small"
						          v-model="msgFormData.msgName" readonly>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="短信内容:"
					              prop="msgCont"
					              required>
						<el-input size="small"
						          type="textarea"
						          :rows="2"
						          placeholder="请输入内容"
						          v-model="msgFormData.msgCont"
						          @change="changeText">
						</el-input>
						<span>已输入&nbsp; {{textLength}} &nbsp;字  自动识别{1}车主名称{2}男士女士{3}车牌号{4}公里{5}时间{6}SA姓名</span>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item style="text-align: right">
						<el-button @click="msgFormShow = false">取 消</el-button>
						<el-button type="primary"
						           @click="saveMsg">提 交</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
export default {
  data: function() {
    return {
      //输入的字数
      textLength: 0,
      //页码数
      CurentPage: 1,
      //每页的数量
      page: this.page,

      //分组数据
      tableData: {
        total: 0,
        dataList: []
      },

      // 维系大类，取任务大类
      wxPType: [],
      wxPCode: "",
      // 维系小类，取任务小类
      wxCType: [],
      wxCCode: "",
      // 任务小类列表
      wxByChild: [],
      wxBxChild: [],
      wxLsChild: [],
      wxGaChild: [],
      wxZhChild: [],
      wxQtChild: [],

	  wxPTypeConv: {},
	  wxByChildConv: {},
      wxBxChildConv: {},
      wxLsChildConv: {},
      wxGaChildConv: {},
      wxZhChildConv: {},
      wxQtChildConv: {},

      //字典转换值
      deptConvertData: {},

      //创建编辑表单
      msgFormShow: false,
      //短信名称是否可编辑
      msgNameEdit: false,
      //业务系统字典
      moduleCombo: [],
      //表单初始值
      emptyData: {
        id: "",
        msgTypeCode: "",
        msgCont: "",
        msgTypeName: "",
        msgName: "",
        status: "1",
        createTime: 0,
        createUser: "",
        updateTime: 0,
        updateUser: ""
      },
      //表单数据
      msgFormData: {
        id: "",
        msgTypeCode: "",
        msgCont: "",
        msgTypeName: "",
        msgName: "",
        status: "1",
        createTime: 0,
        createUser: "",
        updateTime: 0,
        updateUser: ""
      },
      //校验规则
      msgRule: {
		  msgTypeCode: {
            required: true,
            message: "请选择短信大类",
            trigger: "blur"
          },
		   msgTypeName: {
            required: true,
            message: "请选择短信小类",
            trigger: "blur"
          },
        msgName: [
			
          {
            required: true,
            message: "请输入短信名称",
            trigger: "blur"
          }
        ],
        msgCont: [
          {
            required: true,
            message: "请输短信内容",
            trigger: "blur"
          }
        ]
      },

      multipleSelection: []
    };
  },
  methods: {
    changeWxPType: function(val) {
      switch (val) {
        case "by":
          this.$data.wxCType = this.$data.wxByChild;
          break;
        case "bx":
          this.$data.wxCType = this.$data.wxBxChild;
          break;
        case "ga":
          this.$data.wxCType = this.$data.wxGaChild;
          break;
        case "ls":
          this.$data.wxCType = this.$data.wxLsChild;
          break;
        case "qt":
          this.$data.wxCType = this.$data.wxQtChild;
          break;
        case "zh":
          this.$data.wxCType = this.$data.wxZhChild;
          break;
      }
	  var item = this.$data.wxPType.find(t => t.value === val);
      // 回写标题
      this.$data.msgFormData.msgName = "[" + item.label + "]";
    },
	changeWxCType: function(val) {
      var item = this.$data.wxCType.find(t => t.value === val);
      // 回写标题
      this.$data.msgFormData.msgName =
        this.$data.msgFormData.msgName.split("-")[0] + "-" + item.label;
    },
   msgTypeCodeCov:function(row,cloumn){
	   debugger;
	   return  this.$data.wxPTypeConv[row.msgTypeCode];
   },
   msgTypeNameCov:function(row,cloumn){
	   var result = '';
	   switch (row.msgTypeCode) {
        case "by":
           result = this.$data.wxByChildConv[row.msgTypeName];
          break;
        case "bx":
           result = this.$data.wxBxChildConv[row.msgTypeName];
          break;
        case "ga":
          result = this.$data.wxGaChildConv[row.msgTypeName];
          break;
        case "ls":
           result = this.$data.wxLsChildConv[row.msgTypeName];
          break;
        case "qt":
           result = this.$data.wxQtChildConv[row.msgTypeName];
          break;
        case "zh":
           result = this.$data.wxZhChildConv[row.msgTypeName];
          break;
      }
	  return result;
   },
    //查询
    queryMsg: function() {
      //debugger;
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/base/msg/page", //url
        params: {
          //发送的参数
          start: this.$data.CurentPage, //页码
          limit: this.$data.page.pageSize //每页的数量
        }
      }).then(
        function(resp) {
          debugger;
          resp.data.total = parseInt(resp.data.total);
          // es5写法
          this.$data.tableData = resp.data;
        },
        function(error) {
          // error
        }
      );
    },
    //列表，分页大小切换
    handleSizeChange: function() {},
    //列表,当前页切换
    handleCurrentChange: function(currentPage) {
      this.$data.CurentPage = currentPage;
      this.queryMsg();
    },
	//复选框
		handleSelectionChange: function (val) {
			this.$data.multipleSelection = val;
		},
    //修改短信内容的回调函数
    changeText: function(val) {
      //debugger;
      this.$data.textLength = val.length;
    },
    //新增资源角色
    msgAdd: function() {
      this.$data.msgNameEdit = false;
      this.$data.textLength = 0;
      Object.assign(this.$data.msgFormData, this.$data.emptyData);
	  this.$data.msgFormData.msgTypeCode='by';
	  this.changeWxPType(this.$data.msgFormData.msgTypeCode);
      this.$data.msgTypeCode = [];
      this.$data.msgFormShow = true;
      if (this.$refs.msgForm) {
        this.$refs.msgForm.resetFields();
      }
    },
    //编辑角色
    msgEdit: function() {
      if (this.$data.multipleSelection.length == 1) {
        var MsgData = this.$data.multipleSelection[0];
        //修改可编辑属性
        this.$data.msgNameEdit = true;

        this.$http
          .get(this.API_ROOT + "/base/msg/info", {
            params: {
              id: MsgData.id
            }
          })
          .then(
            response => {
             
              this.$data.msgFormData = Object.assign(
                this.$data.msgFormData,
                response.data.data
              );
            
              this.$data.textLength = response.data.data.msgCont.length;
            },
            response => {
              // error callback
            }
          );
        this.$data.msgFormShow = true;
      } else {
        this.$message.error("请选择一条数据");
      }
    },
    //启用角色
    startMsg: function() {
      if (this.$data.multipleSelection.length == 1) {
        var MsgData = this.$data.multipleSelection[0];

        //debugger;
        this.$http({
          method: "POST",
          url: this.API_ROOT + "/base/msg/start",
          params: {
            id: MsgData.id
          }
        }).then(
          function(resp) {
            this.$message(resp.data.msg);
            this.queryMsg();
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$message.error("请选择一条数据");
      }
    },
    //停用角色
    stopMsg: function() {
      if (this.$data.multipleSelection.length == 1) {
        var MsgData = this.$data.multipleSelection[0];

        this.$http({
          method: "POST",
          url: this.API_ROOT + "/base/msg/stop",
          params: {
            id: MsgData.id
          }
        }).then(
          function(resp) {
            this.$message(resp.data.msg);
            this.queryMsg();
          },
          function(error) {
            // error
          }
        );
      } else {
        this.$message.error("请选择一条数据");
      }
    },
    //状态转换
    statusCov: function(row, column) {
      return row.status == "0" ? "已停用" : "已启用";
    },
    //组织机构转换
    deptCov: function(row, column) {
      return this.$data.deptConvertData[row.companyId];
    },
    //组织机构转换
    msgTypeCov: function(row, column) {
      return this.$data.msgTypeConvertData[row.msgTypeCode];
    },
    //点击 提交按钮
    saveMsg: function() {
      debugger;
      this.$refs.msgForm.validate(
        function(valid) {
          if (valid) {
            this.$http
              .post(this.API_ROOT + "/base/msg/save", this.$data.msgFormData)
              .then(
                resp => {
                  if (resp.data.success) {
                    this.$message(resp.data.msg);
                    this.queryMsg();
                    this.$data.msgFormShow = false;
                  } else {
                    this.$message.error(resp.data.msg);
                  }
                },
                resp => {}
              );
          }
          return false;
        }.bind(this)
      );
    },
    queryDeptCovert: function() {
      this.$http
        .get(this.API_ROOT + "/rbac/dept/convert", {
          params: {
            root: "0",
            type: ""
          }
        })
        .then(
          response => {
            this.$data.deptConvertData = response.data;
          },
          response => {}
        );
    },
   
    //加载字典方法
    loadDict: function() {
      // 任务大类Group 02030602
      // 保养 by
      // 保险 bx
      // 关爱 ga
      // 流失 ls
      // 自定义 qt
      // 综合 zh

      //任务状态
      this.$http
        .get(this.API_ROOT + "/base/dict/combo/groups", {
          params: {
            group: "02030602,by,bx,ga,qt,ls,zh,02030603"
          }
        })
        .then(
          response => {
            var combo = response.data;
            this.$data.wxPType = combo["02030602"];
            this.$data.wxByChild = combo["by"];
            this.$data.wxBxChild = combo["bx"];
            this.$data.wxGaChild = combo["ga"];
            this.$data.wxLsChild = combo["ls"];
            this.$data.wxZhChild = combo["zh"];
            this.$data.wxQtChild = combo["qt"];
            this.$data.wxCType = combo["by"];
          },
          response => {}
        );

		//任务状态
      this.$http
        .get(this.API_ROOT + "/base/dict/convert/group", {
          params: {
            group: "02030602,by,bx,ga,qt,ls,zh,02030603"
          }
        })
        .then(
          response => {
            var combo = response.data;
			debugger;
            this.$data.wxPTypeConv = combo["02030602"];
            this.$data.wxByChildConv = combo["by"];
            this.$data.wxBxChildConv = combo["bx"];
            this.$data.wxGaChildConv = combo["ga"];
            this.$data.wxLsChildConv = combo["ls"];
            this.$data.wxZhChildConv = combo["zh"];
            this.$data.wxQtChildConv = combo["qt"];
          },
          response => {}
        );
    }
  },
  //表单创建时执行
  created: function() {
    this.loadDict();
    //列表查询
    this.queryMsg();
    //查询部门转换
    this.queryDeptCovert();
  }
};
</script>
<style>

</style>